<template>
    <div v-if="dataInfo">
        <navigationBar :backType="2" navigationTitle="技师详情" />

        <view class="wrap">
            <view class="wrap-banner">
                <!-- <video :poster="dataInfo.work_image" :src="dataInfo.video_file" /> -->
                <video :src="dataInfo.video_file" />
            </view>

            <view class="wrap-info">
                <view class="one-bg flex align-center just-between">
                    <view class="nickname f-32 fBold limit-num-line">
                        {{ dataInfo.name }}
                    </view>

                    <view class="status-bg flex align-center">
                        <view class="status f-24"> 今日可约 </view>
                        <view class="time f-24">
                            {{ dataInfo.subscribe }}
                        </view>
                    </view>

                    <view class="distance-bg flex align-center just-end">
                        <image :src="getImageURL('home/location.png')" />
                        <view class="f-28">{{ dataInfo.distance }}km</view>
                    </view>
                </view>

                <view class="two-bg flex just-between">
                    <view class="two-left">
                        <view class="authen-bg flex">
                            <view
                                class="item f-20"
                                v-if="dataInfo.authentication == 1"
                            >
                                实名认证
                            </view>
                            <view class="item f-20"> {{ dataInfo.city }} </view>
                            <view class="item f-20">
                                {{ dataInfo.age }}岁
                            </view>
                        </view>

                        <view class="aaa-bg flex align-center f-24">
                            <view class="star-bg flex align-center">
                                <image
                                    class="img"
                                    src="/static/static/home/star.png"
                                />

                                <view class="score"> {{ dataInfo.star }} </view>
                            </view>

                            <view class="service-num">
                                已服务{{ dataInfo.total_sales }}单
                            </view>

                            <view class="year"
                                >从业{{ dataInfo.practise_year }}年</view
                            >

                            <!-- <view class="collection"
                                >{{ dataInfo.attention_num }}人关注</view
                            > -->
                        </view>
                    </view>
                    <view class="appoint-btn f-24" @click="onAppointment">
                        立即预约
                    </view>
                </view>
            </view>

            <view class="wrap-technician-info">
                <view class="photo-bg flex align-center">
                    <view class="name f-28"> 相册： </view>
                    <scroll-view scroll-x class="photo flex">
                        <block
                            v-for="(item, index) in dataInfo.images"
                            :key="index"
                        >
                            <image
                                class="item"
                                :src="item"
                                @click="
                                    $filters.onPreviewImage(
                                        dataInfo.images,
                                        index
                                    )
                                "
                            />
                        </block>
                    </scroll-view>
                </view>

                <view class="info-bg flex align-center">
                    <block v-for="(item, index) in info_list" :key="index">
                        <view class="info-item f-28">
                            {{ item.title }}：{{ dataInfo[item.value]
                            }}{{ item.unit }}
                        </view>
                    </block>
                </view>
            </view>

            <view class="wrap-cer-bg" v-if="false">
                <view class="name f-28"> 营业执照：</view>

                <image
                    class="img"
                    mode="widthFix"
                    :src="dataInfo.qualification_image[0]"
                />
            </view>

            <view class="wrap-list" v-if="list.length > 0">
                <view class="title-list f-32 fBold"> ta的服务项目 </view>

                <projectList
                    :technicianID="technicianID"
                    :showType="1"
                    :list="list"
                />
            </view>
        </view>
    </div>
</template>

<script>
import { technicianDetailsData, projectListData } from "@/API/API/home.js";
import projectList from "@/components/components/home/projectList.vue";
export default {
    components: {
        projectList,
    },
    data() {
        return {
            technicianID: "", //技师ID
            serviceID: "", //服务ID
            dataInfo: null, //详情数据

            info_list: [
                { title: "属相", value: "zodiac_animal_text", unit: "" },
                { title: "星座", value: "constellation_text", unit: "" },
                { title: "性别", value: "gender_text", unit: "" },
                { title: "民族", value: "nation", unit: "" },
                { title: "入驻", value: "into_day", unit: "天" },
                { title: "评价", value: "star", unit: "星" },
                { title: "身高", value: "heigh", unit: "cm" },
                { title: "体重", value: "weigh", unit: "kg" },
            ], //技师的信息

            page: 1,
            total: 0,
            list: [],
            lat: 0,
            lng: 0,
        };
    },
    onLoad(options) {
        this.technicianID = options.technicianID;
        if (options.serviceID) {
            this.serviceID = options.serviceID;
        }
        this.lat = options.lat;
        this.lng = options.lng;

        this.getData();
    },
    onPullDownRefresh() {
        this.onRefresh();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.page++;
            this.getData();
        }
    },
    methods: {
        /**
         * 立即预约
         */
        onAppointment() {
            uni.navigateTo({
                url: `/subPages/technician/home/confirmOrder?technicianID=${this.technicianID}&serviceID=${this.serviceID}`,
            });
        },
        /**
         * 刷新
         */
        onRefresh() {
            this.page = 1;
            this.list = [];
            this.getData();
        },
        getListData() {
            projectListData(this.technicianID, this.page).then((res) => {
                this.total = res.data.total;
                const list = res.data.data;
                if (this.page === 1) {
                    this.list = list;
                } else {
                    this.list = this.list.concat(list);
                }
            });
        },
        /**
         * 网络请求
         */
        getData() {
            technicianDetailsData(
                this.technicianID,
                this.lat,
                this.lng,
                this.page
            ).then((res) => {
                this.dataInfo = res.data;
				this.total = res.data.service.total;
                this.list.push(...res.data.service.data);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    .wrap-banner {
        width: 100%;
        height: 750rpx;
        overflow: hidden;

        video {
            width: 100%;
            height: 750rpx;
        }
    }

    .wrap-info {
        width: 100%;
        background-color: white;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        overflow: hidden;

        .one-bg {
            width: 100%;
            overflow: hidden;

            .nickname {
                --limit-num: 1;
                color: $title-color;
            }

            .status-bg {
                margin-left: 18rpx;
                height: 42rpx;
                border: 2rpx solid $theme-color;
                overflow: hidden;

                > view {
                    height: 42rpx;
                    line-height: 42rpx;
                    text-align: center;
                }

                .status {
                    padding: 0 8rpx;
                    background-color: $theme-color;
                    color: $bg-text-color;
                }

                .time {
                    padding: 0 25rpx;
                    background-color: #e9ebf8;
                    color: #606dce;
                }
            }

            .distance-bg {
                margin-left: 10rpx;
                flex: 1;
                > image {
                    width: 24rpx;
                    height: 28rpx;
                }
                > view {
                    margin-left: 8rpx;
                    color: $title-color;
                }
            }
        }
        .two-bg {
            margin-top: 20rpx;
            width: 100%;
            overflow: hidden;

            .two-left {
                flex: 1;
                margin-right: 10rpx;
                overflow: hidden;

                .authen-bg {
                    width: 100%;
                    overflow: hidden;
                    flex-wrap: wrap;

                    .item {
                        min-width: 96rpx;
                        height: 32rpx;
                        line-height: 32rpx;
                        text-align: center;
                        overflow: hidden;
                        padding: 0 8rpx;
                        box-sizing: border-box;
                        background-color: #fddec6;
                        color: #f87918;
                        border-radius: 4rpx;
                        margin-right: 14rpx;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }

                .aaa-bg {
                    margin-top: 20rpx;
                    width: 100%;
                    overflow: hidden;

                    .star-bg {
                        .img {
                            width: 25rpx;
                            height: 25rpx;
                        }
                        .score {
                            margin-left: 12rpx;
                            color: #f98e35;
                        }
                    }

                    .service-num {
                        margin-left: 22rpx;
                        color: $sub-title-color;
                    }
                    .year {
                        margin-left: 20rpx;
                        color: $sub-title-color;
                    }
                    .collection {
                        margin-left: 20rpx;
                        color: $sub-title-color;
                    }
                }
            }

            .appoint-btn {
                width: 156rpx;
                height: 56rpx;
                line-height: 56rpx;
                text-align: center;
                overflow: hidden;
                border-radius: 30rpx;
                background: $grad-theme-color;
                color: $bg-text-color;
            }
        }
    }

    .wrap-technician-info {
        margin-top: 20rpx;
        width: 100%;
        overflow: hidden;
        background-color: white;
        padding: 20rpx 20rpx 0rpx 20rpx;
        box-sizing: border-box;

        .photo-bg {
            width: 100%;
            overflow: hidden;

            .photo {
                margin-left: 15rpx;
                flex: 1;
                overflow: hidden;
                white-space: nowrap;

                .item {
                    width: 100rpx;
                    height: 100rpx;
                    display: inline-block;
                    border-radius: 12rpx;
                    overflow: hidden;
                    margin-right: 14rpx;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
            .name {
                color: $title-color;
            }
        }

        .info-bg {
            margin-top: 30rpx;
            width: 100%;
            overflow: hidden;
            flex-wrap: wrap;

            .info-item {
                width: calc(100% / 3);
                color: $title-color;
                margin-bottom: 30rpx;
            }
        }
    }

    .wrap-cer-bg {
        margin-top: 20rpx;
        width: 100%;
        overflow: hidden;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        background-color: white;

        .name {
            color: $title-color;
        }
        .img {
            margin-top: 20rpx;
            width: 100%;
            border-radius: 20rpx;
            overflow: hidden;
        }

        .mtp {
            margin-top: 30rpx;
        }
    }

    .wrap-list {
        margin-top: 20rpx;
        width: 100%;
        background-color: white;
        overflow: hidden;

        .title-list {
            margin-left: 20rpx;
            margin-top: 30rpx;
            color: $title-color;
        }
    }
}
</style>
